{% extends "volunteer_base.html" %}
{% load i18n %}
{% block head %}
<title>{% trans "审核报名信息" %}</title>
{% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}bootstrap-3.3.4-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/components_pro/layout6/css/index.css" rel="stylesheet" />

<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/dialog.css" rel="stylesheet" />

<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/themes/default/css/umeditor.css"
    rel="stylesheet" />
{{ block.super }}
{% endblock %}

{% block bar%}
<!-- 侧边导航栏start -->
<div class="bar">
    <div class="sidebar">
        <ul>
            <li>
                <a href="{{ SITE_URL }}companyHome/"><span class="iconfont icon-zhuye1"></span>主页</a>
            </li>
            <li>
                <a href="{{ SITE_URL }}checkApply/"><span class="iconfont icon-shenhexiangmu"></span>审核报名</a>
            </li>
            <li>
                <a href="{{ SITE_URL }}"><span class="iconfont icon-jinru"></span>退出登录</a>
            </li>
        </ul>
    </div>
    <a class="btn">
        <span class="iconfont icon-zhedie"></span>
    </a>

</div>
<!-- 侧边导航栏结束 -->
{% endblock %}


{% block content %}
<div class="content">
    <div class="part3">
        <div class="part3_box">
            <div class="imgBox">
                <img src="{{ STATIC_URL }}open/img/boximg4.jpg" alt="">
            </div>
            <div class="box_content">
                <h2>志愿者，选择温暖这座城<br>
                    <span>你的样子就是中国的样子</span>
                </h2>
            </div>
        </div>
        <div class="part3_box">
            <div class="imgBox">
                <img src="{{ STATIC_URL }}open/img/boximg5.jpg" alt="">
            </div>
            <div class="box_content">
                <h2>逆行不独行，隔离不分离<br>
                    <span>抗疫无国界，爱心零时差</span>
                </h2>
            </div>

        </div>
        <div class="part3_box">
            <div class="imgBox">
                <img src="{{ STATIC_URL }}open/img/boximg6.jpg" alt="">
            </div>
            <div class="box_content">
                <h2>众志成城，人山人海<br>
                    <span>最美志愿者，平淡的日子里泛着光</span>
                </h2>
            </div>

        </div>
    </div>

    <div style="clear: both;"></div>
    <!-- 报名信息表审核 -->
    <div class="page-content " style="width:75%; background: #faefff; color: #888;">
        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab" style="background: #faefff;">
                <a role="button" data-toggle="collapse" href="#panel-content2" class="panel-icon panel-spread"
                    aria-expanded="true"></a>
                <h3 role="button" data-toggle="collapse" href="#panel-content2" class="panel-title" style="color: #888;"
                    aria-expanded="true">报名信息表审核</h3>
            </div>
            <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true">
                <table class="bk-table bk-table-header-bordered" id="apply" style="background: #faefff;">
                    <thead>
                        <tr>
                            <th>报名活动</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>学校</th>
                            <th>年级</th>
                            <th>报名时间</th>
                            <th>报名状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_block %}
<!-- <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.2.min.js"></script> -->
<script type="text/javascript" src="{{ STATIC_URL }}bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
    src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDialog-2.0/js/bkDialog.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkMessage-1.0/js/bkMessage.js"></script>

<script src="{{ SITE_URL }}static/datatables-1.10.7/jquery.dataTables.js"></script>
<script src="{{ SITE_URL }}static/datatables-1.10.7/dataTables.bootstrap.js"></script>
<script>

    //表格(DataTables)
    var language = {
        search: "搜索：",
        lengthMenu: "每页显示 _MENU_ 记录",
        zeroRecords: "没找到相应的数据！",
        info: "分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条",
        infoEmpty: "暂无数据！",
        infoFiltered: "(从 _MAX_ 条数据中搜索)",
        paginate: {
            first: "首页",
            last: "尾页",
            previous: "上一页",
            next: "下一页",
        }
    }
    // 报名表
    var applyTable = $('#apply').DataTable({
        sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
        pagingType: "full_numbers",
        paging: false, //隐藏分页
        ordering: false, //关闭排序
        info: false, //隐藏左下角分页信息
        searching: false, //关闭搜索
        pageLength: 10, //每页显示几条数据
        lengthChange: false, //不允许用户改变表格每页显示的记录数
        language: language, //汉化
        serverSide: true,
        // lengthMenu: [5, 10, 25, 50, 75, 100],
        ajax: {
            url: '{{ SITE_URL }}get_apply_list/',
            method: "get",
            dataType: 'json',
            dataSrc: function (json) {
                json.recordsTotal = json.data.info.recordsTotal;
                json.recordsFiltered = json.data.info.recordsFiltered;
                json.data = json.data.info.data
                return json.data;
            },
        },
        columnDefs: [
            {
                targets: 0,
                data: "belonging_activity",
            },
            {
                targets: 1,
                data: "apply_name",
            },
            {
                targets: 2,
                data: "apply_age",
            },
            {
                targets: 3,
                data: "apply_sex",
            },
            {
                targets: 4,
                data: "apply_school",
            },
            {
                targets: 5,
                data: "apply_grade",
            },
            {
                targets: 6,
                data: "apply_time",
            },
            {
                targets: 7,
                data: "apply_status",
                render: function (data, type, row, meta) {
                    if (data === "待审核") {
                        return '<span class="bk-tag is-fill bk-gray">' + data + '</span>';
                    } else if (data === "已审核") {
                        return '<span class="bk-tag is-fill bk-primary">' + data + '</span>';
                    } else if (data === "未通过") {
                        return '<span class="bk-tag is-fill bk-error">' + data + '</span>';
                    } else {
                        return '<span class="bk-tag is-fill bk-success">' + data + '</span>';
                    }
                }
            },
            {
                targets: 8,
                data: "id",
                render: function (data, type, row, meta) {
                    if (row.apply_status === "待审核") {
                        return '<a class="bk-icon-button bk-primary bk-button-mini" type="button" onclick="switchApplyStatus(1, ' + data + ')" title="通过">\n' +
                            '<i class="bk-icon icon-check-1 bk-icon" style="color:#000;"></i>\n' +
                            '<i class="bk-text">通过</i>\n' +
                            '</a>' +
                            '<a class="bk-icon-button bk-danger bk-button-mini" type="button" onclick="switchApplyStatus(2, ' + data + ')" title="驳回">\n' +
                            '<i class="bk-icon icon-close bk-icon" style="color:#000;"></i>\n' +
                            '<i class="bk-text">拒绝</i>\n' +
                            '</a>';
                    } else if (row.apply_status === "未通过") {
                        return '--'
                    } else if (row.apply_status === "已审核") {
                        return '--';
                    } else {
                        return '--';
                    }
                }

            }
        ]
    });
    setInterval(function () {
        applyTable.ajax.reload(null, false);
    }, 3000);
    setInterval(function () {
        activityTable.ajax.reload(null, false); // user paging is not reset on reload
    }, 3000);


    // 通过————审核通过
    function switchApplyStatus(action, id) {
        var dialog = new bkDialog({
            type: 'dialog',
            title: '审核报名信息',
            content: action === 1 ? '确认通过该报名信息？' : '确认拒绝该报名信息？',
            confirmFn: function () {
                $.ajax({
                    url: '{{ SITE_URL }}switch_apply_status/',
                    method: 'post',
                    data: {
                        "id": id,
                        "action": action
                    },
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            applyTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                        }
                    }
                })
            }
        });
        dialog.show();
    }


</script>

{% endblock %}